<template>
    <div class="administer">
        <div class="administerNav">
            <backHeader></backHeader>
        </div>
        <div class="administerCont">
            <div class="product html_pst">
                <div class="top">
                    <div class="roleControl" style="text-align:right">
                        <ul>  
                        <li  @click="showAddModel()"><i class="el-icon-circle-plus-outline"></i>添加</li>
                        <li @click="showEditModel()"><img src="@/assets/images/bb3.jpg" alt="">修改</li> 
                        <li @click="showDeleteModel()"><img src="@/assets/images/bb4.jpg" alt="">删除</li>
                        </ul>
                    </div>
                    <el-dialog  :title="modelTitle" :visible.sync="isShowModel" custom-class="addproduct pop-up"  v-dialogDrag>
                        <el-form ref="form" :inline="true" label-width="86px">
                            <div class="wid100">
                                <div class="lt">
                                    <el-form-item label="品牌名称" :rules="[{required: true}]">
                                        <el-input v-model="form.brandName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="英文名称">
                                        <el-input v-model="form.brandCode"></el-input>
                                    </el-form-item>
                                    <el-form-item label="联系人">
                                        <el-input v-model="form.linkMan"></el-input>
                                    </el-form-item>
                                    <el-form-item label="联系电话">
                                        <el-input v-model="form.linkPhone"></el-input>
                                    </el-form-item>
                                    <el-form-item label="电子邮箱">
                                        <el-input v-model="form.linkMail"></el-input>
                                    </el-form-item>
                                </div>
                                <div class="rt">
                                    <el-form-item label="品牌LOGO"  :rules="[{required: true}]" class="sce" label-width="87">
                                        <template>
                                            <div style="clear:both;"></div>
                                            <div v-if="form.brandLogo" class="el-upload-list--picture-card avatar-uploader" >
                                                <img class="el-upload-list__item-thumbnail avatar" :src="ImgPath +  form.brandLogo" alt="" style="width:140px;height:140px;float:left;margin-bottom:17px">
                                                <span class="el-upload-list__item-actions" style="width:140px;height:140px">
                                                    <span
                                                    class="el-upload-list__item-delete"
                                                    @click="brandLogoRemove()">
                                                    <i class="el-icon-delete"></i>
                                                    </span>
                                                </span>
                                            </div>

                                            <el-upload  v-else class="avatar-uploader"
                                                :action="uploadUrl" 
                                                :show-file-list="false" 
                                                :headers ="headers"
                                                :on-success="handleAvatarSuccess" 
                                                :before-upload="beforeAvatarUpload">
                                                <i class="el-icon-plus avatar-uploader-icon"></i>
                                            </el-upload>
                                            <div style="clear:both;"></div>
                                        </template>
                                    </el-form-item>
                                    
                                    <el-form-item label="宣传图1" class="sce">
                                        <template>
                                            <div style="clear:both;"></div>
                                            <div v-if="form.adPic1" class="el-upload-list--picture-card avatar-uploader" >
                                                <img class="el-upload-list__item-thumbnail avatar" :src="ImgPath +  form.adPic1" alt="" style="width:120px;height:120px;float:left;margin-bottom:22px">
                                                <span class="el-upload-list__item-actions" style="width:120px;height:120px">
                                                    <span
                                                    class="el-upload-list__item-delete"
                                                    @click="brandpic1Remove()">
                                                    <i class="el-icon-delete"></i>
                                                    </span>
                                                </span>
                                            </div>
                                            
                                            <el-upload v-else class="avatar-uploader" 
                                                :action="uploadUrl" 
                                                :show-file-list="false" 
                                                :headers ="headers"
                                                :on-success="handleAvatarSuccess1" 
                                                :before-upload="beforeAvatarUpload">
                                                <i class="el-icon-plus avatar-uploader-icon"></i>
                                            </el-upload>
                                            <div style="clear:both;"></div>
                                        </template>
                                    </el-form-item>
                                    <el-form-item label="宣传图2" class="sce">
                                        <template>
                                            <div style="clear:both;"></div>
                                            <div v-if="form.adPic2" class="el-upload-list--picture-card avatar-uploader" >
                                                <img class="el-upload-list__item-thumbnail avatar" :src="ImgPath +  form.adPic2" alt="" style="width:120px;height:120px;float:left;margin-bottom:22px">
                                                <span class="el-upload-list__item-actions" style="width:120px;height:120px">
                                                    <span
                                                    class="el-upload-list__item-delete"
                                                    @click="brandpic2Remove()">
                                                    <i class="el-icon-delete"></i>
                                                    </span>
                                                </span>
                                            </div>
                                            <el-upload v-else class="avatar-uploader" 
                                                :action="uploadUrl" 
                                                :show-file-list="false" 
                                                :headers ="headers"
                                                :on-success="handleAvatarSuccess2" 
                                                :before-upload="beforeAvatarUpload">
                                                <i  class="el-icon-plus avatar-uploader-icon"></i>
                                            </el-upload>
                                            <div style="clear:both;"></div>
                                        </template>
                                    </el-form-item>
                                    <el-form-item label="宣传图3" class="sce">
                                        <template>
                                            <div style="clear:both;"></div>
                                            <div v-if="form.adPic3" class="el-upload-list--picture-card avatar-uploader" >
                                                <img class="el-upload-list__item-thumbnail avatar" :src="ImgPath +  form.adPic3" alt="" style="width:120px;height:120px;float:left;margin-bottom:22px">
                                                <span class="el-upload-list__item-actions" style="width:120px;height:120px">
                                                    <span
                                                    class="el-upload-list__item-delete"
                                                    @click="brandpic3Remove()">
                                                    <i class="el-icon-delete"></i>
                                                    </span>
                                                </span>
                                            </div>
                                            <el-upload v-else class="avatar-uploader" 
                                                :action="uploadUrl" 
                                                :show-file-list="false" 
                                                :headers ="headers"
                                                :on-success="handleAvatarSuccess3" 
                                                :before-upload="beforeAvatarUpload">
                                                <i class="el-icon-plus avatar-uploader-icon"></i>
                                            </el-upload>
                                            <div style="clear:both;"></div>
                                        </template>
                                    </el-form-item>
                                </div>
                            </div> 
                            <div class="lt_rt">
                                <el-form-item label="品牌简介" class="sce">
                                        <el-input v-model="form.briefIntro" maxlength="300"
  show-word-limit type="textarea" :rows="6"></el-input>
                                    </el-form-item>
                                
                                </div>                          
                            <el-form-item class="botm">
                                <el-button @click="isShowModel = false">取消</el-button>
                                <el-button @click="editBrand()" v-if="modelTitle=='修改品牌'" type="primary">确定</el-button>  
                                <el-button @click="addBrand()" v-else type="primary">确定</el-button>  
                            </el-form-item>
                        </el-form>
                        
                    </el-dialog>
                </div>
                <div class="roleControl">
                    <div class="table_S">
                    <el-table
                        :data="tableData"
                        border
                        @row-click="clickRow"
                        highlight-current-row
                        style="width: 100%"
                        :max-height="tableHeight">
                        <el-table-column type="index" label="序号" width="50">
                        </el-table-column>
                        <el-table-column prop="brandLogo" label="品牌logo">
                            <template slot-scope="scope">
                                <img v-if="scope.row.brandLogo != null && scope.row.brandLogo != 'undefined' && scope.row.brandLogo != ''" :src="ImgPath + scope.row.brandLogo" width="100" height="100" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="brandName" label="品牌名称"></el-table-column>
                        <el-table-column prop="linkMan" label=" 联系人"></el-table-column>
                        <el-table-column prop="linkPhone" label=" 联系电话"></el-table-column>
                        <el-table-column prop="linkMail" label=" 电子邮箱"></el-table-column>
                        <el-table-column prop="" label=" 宣传图">
                            <template slot-scope="scope">
                                <img v-if="scope.row.adPic1 != null && scope.row.adPic1 != 'undefined' && scope.row.adPic1 != ''" :src="ImgPath + scope.row.adPic1" width="100" height="100" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="" label=" 宣传图2">
                            <template slot-scope="scope">
                                <img v-if="scope.row.adPic2 != null && scope.row.adPic2 != 'undefined' && scope.row.adPic2 != '' " :src="ImgPath + scope.row.adPic2" width="100" height="100" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="" label=" 宣传图3">
                            <template slot-scope="scope">
                                <img v-if="scope.row.adPic3 != null && scope.row.adPic3 != 'undefined' && scope.row.adPic3 != ''" :src="ImgPath + scope.row.adPic3" width="100" height="100" />
                            </template>
                        </el-table-column>
                        <el-table-column label="品牌简介" width="165">
                             <template slot-scope="scope">
                                <el-popover placement="top" trigger="hover" width="400">
                                    {{ scope.row.briefIntro }}
                                    <div slot="reference"><span id="wenzi">{{ scope.row.briefIntro }}</span></div>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column label=" 操作">
                            <template slot-scope="scope">
                                <el-button
                                size="mini"
                                class="editor table_editor "
                                @click="handleEdit(scope.row)">修改</el-button>
                                <el-button
                                size="mini"
                                type="danger"
                                class="delete table_editor"
                                @click="handleDelete(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column> -->
                    </el-table>
                    <div style="padding:10px;text-align:center">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="request.page"
                            :page-sizes="[20, 50, 100, 200]"
                            :page-size="request.rows"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalCount">
                        </el-pagination>
                    </div>
                    </div>
                </div>
        </div>
    </div>
    </div>
</template>
<script>
import backHeader from '@/views/common/backHeader.vue'
export default {
    data() {
      return {
          tableHeight:200,
          modelTitle:'新增品牌',
          isShowModel:false,
          form:{
              brandName:'',
              brandCode:'',
              brandLogo:'',
              briefIntro:'',
              linkMan:'',
              linkPhone:'',
              linkMail:'',
              adPic1:'',
              adPic2:'',
              adPic3:'',
          },
          uploadUrl:'',
          loading:false,
          request:{
              page:1,
              rows:20,
          },
          totalCount:0,
          tableData:[],
          currentEditRow:{},
          headers: {
                "Authorization": localStorage.getItem('token')
            },
      }
    },
    methods: {
      clickRow(item){
        this.currentEditRow = item
        console.log(item)
      },
      initData(){
          this.search(1)
      },
      brandLogoRemove() {
          this.form.brandLogo = ''
      },
      brandpic1Remove(){
          this.form.adPic1 = ''
      },
      brandpic2Remove(){
          this.form.adPic2 = ''
      },
      brandpic3Remove(){
          this.form.adPic3 = ''
      },
      search(page){
            this.loading = true
            let self = this
            this.request.page = page
            this.$http.postObj('/api/brands/pageJson',this.request,function(res){
                if(res.success){
                    self.tableData = res.data.rows
                    self.totalCount = res.data.total
                }
                self.loading = false
            })
      },
        handleCurrentChange(page) {
            this.search(page)
        },
        handleSizeChange(pageSize){
            this.request.rows = pageSize
            this.search(1)
        },
        showAddModel(){
            this.modelTitle='新增品牌'
            this.isShowModel=true
          this.form={
              brandName:'',
              brandCode:'',
              brandLogo:'',
              briefIntro:'',
              linkMan:'',
              linkPhone:'',
              linkMail:'',
              adPic1:'',
              adPic2:'',
              adPic3:'',
          }
      this.uploadUrl = this.$http.getSignUrl('/api/files/upload',{type:'image'})
        },
        addBrand(){
            if(this.form.brandName == ''){
              this.$message.error("请输入品牌名称")
              return false;
          }
          if(this.form.brandLogo == ''){
              this.$message.error("请选择品牌logo")
              return false;
          }
            var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
                if (this.form.linkMail != '' && !regEmail.test(this.form.linkMail)) {
                    this.$message({
                        message: '邮箱格式不正确',
                        type: 'error'
                    })
                    return
                }
            let self = this
            this.$http.postObj('/api/brands',this.form,function(res){
                console.log(res)
                self.search(1)
                self.isShowModel = false
            })
        },
      showEditModel(){
        if(this.currentEditRow != null && this.currentEditRow.id != null && this.currentEditRow.id > 0){
            var row = this.currentEditRow
          this.modelTitle='修改品牌'
            this.form={
              brandName:row.brandName,
              brandCode:row.brandCode,
              brandLogo:row.brandLogo,
              briefIntro:row.briefIntro,
              adPic1:row.adPic1,
              adPic2:row.adPic2,
              adPic3:row.adPic3,
              linkMan:row.linkMan,
              linkPhone:row.linkPhone,
              linkMail:row.linkMail,
              id:row.id,
            }
            this.isShowModel = true
            this.uploadUrl = this.$http.getSignUrl('/api/files/upload',{type:'image'})
        }else{
          this.$message.error("请先选择一条数据！")
        }
      },
      showDeleteModel(){
        var id = this.currentEditRow.id
        let self = this;
        if(this.currentEditRow != null && this.currentEditRow.id != null && this.currentEditRow.id > 0){
          this.$confirm('您确定要删除吗?','提示',{
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
          }).then(()=>{

            this.$http.deletePath('/api/brands/'+id,{},function(res){
                if (res.success) {
                    self.$message({
                    message: "删除成功！",
                    type: "success"
                    });
                }else{
                    self.$message.error(res.data)
                }
                self.search(1)
            })

          }).catch(()=>{});
        }else{
          this.$message.error("请先选择一条数据！")
        }
      },
      editBrand(){
          if(this.form.brandName == ''){
              this.$message.error("请输入品牌名称")
              return false;
          }
          if(this.form.brandLogo == ''){
              this.$message.error("请选择品牌Logo")
              return false;
          }
            var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
                if (this.form.linkMail != null && this.form.linkMail != undefined &&  this.form.linkMail != '' && !regEmail.test(this.form.linkMail)) {
                    this.$message({
                        message: '邮箱格式不正确',
                        type: 'error'
                    })
                    return
                }
            let self = this
            this.$http.putObj('/api/brands',this.form,function(res){
                self.search(1)
                self.isShowModel = false
            })
      },
      handleAvatarSuccess(res, file) {
        console.log(res)
        if(res.success){
                this.form.brandLogo = res.data.savePath
                this.$message({
                    type:'success',
                    message:'文件上传成功!'
                })
            }
      },

      handleAvatarSuccess1(res, file) {
        console.log(res)
        if(res.success){
                this.form.adPic1 = res.data.savePath
                this.$message({
                    type:'success',
                    message:'文件上传成功!'
                })
            }
      },

      handleAvatarSuccess2(res, file) {
        console.log(res)
        if(res.success){
                this.form.adPic2 = res.data.savePath
                this.$message({
                    type:'success',
                    message:'文件上传成功!'
                })
            }
      },

      handleAvatarSuccess3(res, file) {
        console.log(res)
        if(res.success){
                this.form.adPic3 = res.data.savePath
                this.$message({
                    type:'success',
                    message:'文件上传成功!'
                })
            }
      },
      beforeAvatarUpload(file) {
        var testmsg=/^image\/(jpeg|png|jpg|gif)$/.test(file.type)
	          const isLt4M = file.size / 1024/1024 <=1//图片大小不超过2MB
	          if (!testmsg) {
	            this.$message.error('上传图片格式错误!');
	            return
	          }
	          if(!isLt4M) {
	            this.$message.error('上传图片大小不能超过 1M!');
	            return
              }
	          return testmsg  && isLt4M
      }
    },
    created(){
        this.initData()
    },
    components: {
        backHeader
    },
    mounted(){
        this.$nextTick(function () {
            this.tableHeight = window.innerHeight - 240;
            // 监听窗口大小变化
            let self = this;
            window.onresize = function() {
                self.tableHeight = window.innerHeight - 240
            }
           

        })
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
.addproduct.pop-up{
    width: 775px;
    .lt{
        width:300px;
    }
    .rt{
        width: 410px;
    }
}
#wenzi{
    width: 142px;
    display: inline-block;
    overflow:hidden; 
display:-webkit-box; 
-webkit-box-orient:vertical; 
-webkit-line-clamp:3;
text-overflow:ellipsis;
  word-break: break-all;
}
.table_editor{
        position: initial;
}
.addproduct{
    .lt{
        width: 50%;
        float: left;
    }
    .rt{
        width: 50%;
        float: left;
        .sce{
            width: 50% !important;
            float: left;
        }
        .avatar-uploader{
            img{
                max-width: 120px !important;
                max-height: 120px !important;
            }
        }
        .avatar-uploader-icon{
            width: 120px;
            height: 120px;
            line-height: 120px;
        }
    }
    .lt_rt{
        width: 100%;
        display: inline-block;
        .sce{
            width: 100%;
            float: left;
            
            .el-form-item__content{
                width: calc(100% - 87px);
            }
        }
    }
    .botm{
        text-align: center;
        margin-right: 0;
        display: block;
    }
    .el-button{
        background-color: rgba(0,0,0,0) !important;
        color: #333;
        border: 1px solid #dcdfe6 !important;
        &.el-button--primary{
            background-color: #5b65a1 !important;
            border-radius: 4px;
            border: none;
            color: #fff;
        }
    }
}
.product{

    .top{
        margin-bottom: 20px;
        button{
            background-color: #5b65a1;
            border-radius: 4px;
            border: none;
        }
    }
}
.table_S{
    .editor{
        background: none;
        border: none;
        padding: 0;
        color: #0070ed;
        font-size: 14px;
    }
     .delete{
        background: none;
        border: none;
        padding: 0;
        color: #d80000;
        font-size: 14px;
    }

}
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 140px;
    height: 140px;
    line-height: 140px;
    text-align: center;
  }
  .avatar {
    width: 140px;
    height: 140px;
    display: block;
  } 
  .avatar1{
    width: 120px;
    height: 120px;
    display: block;
  }
  .addproduct.pop-up{
      .rt{
          .sce{
              width: 100%;
              margin-right: 0;
              margin-bottom: 1px;
              .el-form-item__content{
                  width: calc(100% - 93px);
              }
          }
      }
  }
  .el-upload-list--picture-card .el-upload-list__item-actions .el-upload-list__item-delete {
	position: static;
	font-size: inherit;
	color: inherit
    }

.el-upload-list--picture-card .el-upload-list__item-actions {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	cursor: default;
	text-align: center;
	color: #fff;
	opacity: 0;
	font-size: 20px;
	background-color: rgba(0,0,0,.5);
	transition: opacity .3s
}

.el-upload-list--picture-card .el-upload-list__item-actions:after {
	display: inline-block;
	content: "";
	height: 100%;
	vertical-align: middle
}

.el-upload-list--picture-card .el-upload-list__item-actions span {
	display: none;
	cursor: pointer
}

.el-upload-list--picture-card .el-upload-list__item-actions span+span {
	margin-left: 15px
}

.el-upload-list--picture-card .el-upload-list__item-actions:hover {
	opacity: 1
}

.el-upload-list--picture-card .el-upload-list__item-actions:hover span {
	display: inline-block
}
.el-upload-list--picture-card .el-upload-list__item-thumbnail {
	width: 100%;
	height: 100%
}

</style>

    